import React from 'react'
import { Modal, Button, Tabs, Icon, message, Spin, Col, Row } from 'antd'
import 'styles/loan-billing/debt-modal.scss'
import {queryCurrencyPrecision, messages, deepFullCopy} from "share/common";

import borrowService from 'containers/loan-billing/borrow-and-return.service'
const TabPane = Tabs.TabPane;

class DebtModal extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      info: {},
      status: 'company',
      modalInfo: {},
      companyInfo: {},
      setOfBookInfo: {},
      loading: false,
      loanInfo: {}
    }
  }

  componentWillReceiveProps(nextProps) {
    if(nextProps.visible === this.props.visible){
      return -1;
    }
    if(!nextProps.visible){
      this.setState({
        info: {},
        status: 'company'
      });
      return -1;
    }
    this.setState({info: nextProps.info, loanInfo: nextProps.loanInfo},() => {
      const { info, loanInfo } = this.state;
      this.setState({ loading: true });
      Promise.all([
        borrowService.getLoanInfo({payeeId: info.payeeId, companyId: loanInfo.companyId}),
        borrowService.getLoanInfo({payeeId: info.payeeId, setOfBooksId: loanInfo.setOfBooksId})
      ]).then(res => {
        this.setState({
          modalInfo: res[0].data,
          companyInfo: res[0].data,
          setOfBookInfo: res[1].data,
          loading: false
        });
      }).catch(() => {
        message.error(messages('loan-billing.key25')/*系统异常*/);
        this.setState({ loading: false });
      })
    })
  }

  handleTabChange = value => {
    let { modalInfo, companyInfo, setOfBookInfo } = this.state;
    if(value === 'company'){
      modalInfo = deepFullCopy(companyInfo);
    } else {
      modalInfo = deepFullCopy(setOfBookInfo);
    }
    this.setState({status: value, modalInfo});
  };

  render(){
    const { status, modalInfo, loading } = this.state;
    const { visible, close } = this.props;
    return(
      <Modal title={messages('loan-billing.key131')/*待还统计*/}
             visible={visible}
             className={'debt-modal'}
             footer={<div>
               <Button onClick={() => close()}>{messages('loan-billing.key132')/*关闭*/}</Button>
             </div>}
             onCancel={close}>
        <Spin spinning={loading}>
          <Tabs defaultActiveKey={status} onChange={this.handleTabChange}>
            <TabPane tab={messages('loan-billing.key133')/*当前公司*/} key={'company'}/>
            <TabPane tab={messages('loan-billing.key134')/*当前账套*/} key={'setOfBook'}/>
          </Tabs>
          <div style={{padding: '10px 0px'}}>{messages('loan-billing.key135')/*总计欠款：*/}
            <Icon type="info-circle-o" className='default-color-font' style={{fontSize: '16px', marginLeft: '10px'}}/>
            <span style={{color: '#d0d0d0', marginLeft: '5px'}}>{messages('loan-billing.key136')/*总计欠款包括待还金额、还款中的金额和在途金额*/}</span>
            <Row style={{marginTop:'10px'}}>
              {modalInfo.totalLoanAmounts && modalInfo.totalLoanAmounts.length > 0 ? modalInfo.totalLoanAmounts.map(item => {
                return <Col span={8} style={{fontSize:'16px'}}>{`${item.currencyCode} ${React.Component.prototype.filterMoney(item.loanAmount, queryCurrencyPrecision(item.currencyCode), true)}`}</Col>
              }) : <Col span={24} style={{textAlign: 'center'}}>{messages('loan-billing.key137')/*暂无欠款～*/}</Col>}
            </Row>
          </div>
          {modalInfo.loanAmountDetails && modalInfo.loanAmountDetails.map(item => {
            return (
              <div>
                <div className={'debt-title'}>
                  <span>{item.loanTypeName}</span>
                  <span>（{item.prePaymentTypeCode === 1001 ? messages('loan-billing.key138')/*不控制*/ : item.prePaymentTypeCode === 1002 ? messages('loan-billing.key139')/*同类型控制*/ : messages('loan-billing.key140')/*全控制*/}
                    {item.maxLoanAmountCurrencyCode ?
                      `,${messages('loan-billing.key141')/*借款上限*/}：${item.maxLoanAmountCurrencyCode} ${React.Component.prototype.filterMoney(item.maxLoanAmount, queryCurrencyPrecision(item.maxLoanAmountCurrencyCode), true)}` : ''}）</span>
                </div>
                <div style={{padding: '10px 0px'}}>
                  <Row>
                    <Col span={4}>{messages('loan-billing.key142')/*待还：*/}</Col>
                    <Col span={20}>
                      {item.pendingRepaymentLoanAmounts && item.pendingRepaymentLoanAmounts.length > 0 ? item.pendingRepaymentLoanAmounts.map(item => {
                        return <Col span={8}>{`${item.currencyCode} ${React.Component.prototype.filterMoney(item.loanAmount, queryCurrencyPrecision(item.currencyCode), true)}`}</Col>
                      }) : <Col span={24}>{messages('loan-billing.key137')/*暂无欠款～*/}</Col>}
                    </Col>
                  </Row>
                  <Row>
                    <Col span={4}>{messages('loan-billing.key143')/*还款中：*/}</Col>
                    <Col span={20}>
                      {item.repayingLoanAmounts && item.repayingLoanAmounts.length > 0 ? item.repayingLoanAmounts.map(item => {
                        return <Col span={8}>{`${item.currencyCode} ${React.Component.prototype.filterMoney(item.loanAmount, queryCurrencyPrecision(item.currencyCode), true)}`}</Col>
                      }) : <Col span={24}>{messages('loan-billing.key137')/*暂无欠款～*/}</Col>}
                    </Col>
                  </Row>
                  <Row>
                    <Col span={4}>{messages('loan-billing.key144')/*在途：*/}</Col>
                    <Col span={20}>
                      {item.loanAmountsOnTheWay && item.loanAmountsOnTheWay.length > 0 ? item.loanAmountsOnTheWay.map(item => {
                        return <Col span={8}>{`${item.currencyCode} ${React.Component.prototype.filterMoney(item.loanAmount, queryCurrencyPrecision(item.currencyCode), true)}`}</Col>
                      }) : <Col span={24}>{messages('loan-billing.key137')/*暂无欠款～*/}</Col>}
                    </Col>
                  </Row>
                </div>
              </div>
            )
          })}
        </Spin>
      </Modal>
    )
  }
}

DebtModal.propTypes = {
  visible: React.PropTypes.bool,
  close: React.PropTypes.func
};

DebtModal.defaultProps = {
  visible: false,
  close: () => {}
};

export default DebtModal;
